@import "variable.styl"

body, html
  line-height: 1
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  user-select: none
  -webkit-tap-highlight-color: transparent
  background: $color-background
  color: $color-text
  font-size:14px
  .title
     width: 100%;
     padding: 30px 0 25px;
     text-align: center;
     color: #2d4ed1;
     font-size: 18px
  .inputBox {
     padding: 0 14px;
     position: relative;
     color: #2d4ed1;
     font-size: 14px
  }

  .inputBox.padType2 {
     padding: 0 0 0 14px
  }

  .inputBox .input {
     display: flex;
     align-items:center;
     padding: 0;
     height: 49px;
     line-height: 49px;
     text-align: left;
     position: relative
  }

  .inputBox .input:after {
     display: block;
     position: absolute;
     left: 0;
     bottom: 0;
     border-top: 1px solid #ddd;
     content: " ";
     width: 100%
  }

  .inputBox .input.size-2 {
     padding: 0;
     height: 49px;
     line-height: 49px
  }

  .inputBox .input.align-0 {
     height: 63px;
     line-height: 63px
  }

  .inputBox .input.align-1 {
     height: 56px;
     line-height: 56px
  }

  .inputBox .input.align-2 label {
     display: inline!important;
     margin-right: 2em
  }

  .inputBox .input.textAlignRight input {
     float: right;
     margin-top: 15px;
     text-align: right;
     margin-right: 15px
  }

  .inputBox .input label {
     font-size: 14px;
     color: #333;
     min-width: 70px;
     display: inline-block;
     vertical-align: middle
  }

  .inputBox .input input {
     color: #333;
     margin-top: -1px;
     background: none;
     width:60%;
  }

  .inputBox .input input .large {
     width: 66%
  }

  .inputBox .input h2 {
     font-size: 16px;
     color: #333
  }
  .buttonBox {
      padding: 0 14rpx;
      position: relative;
      color: #2d4ed1;
      font-size: 16px;
  }
  .mt50{margin-top: 50px;}
  .mt20{margin-top: 20px;}
  .mt40{margin-top: 40px;}

  .button {
      padding: 12px 0;
      text-align: center;
      color: #fff;
      background: #2d4ed1;
      border-radius: 3px;
  }
  .buttonBox .button.disable {
    background: #ddd;
    pointer-events: none;
  }
  .buttonBox .button.reverse {
      background: none;
      color: #2d4ed1;
      padding: 11px 0;
      border: 1px solid #2d4ed1;
  }
  .button:active {
      opacity:0.9;
  }
  .forget-register {
      margin: 25px 14px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between
  }

  .forget-register a {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      font-size: 13px;
      color: #666;
      display: block;
  }

  .forget-register a.register-btn {
      color: #2d4ed1
  }
  .inputBox .eye {
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    background: url('');
    background-size: 100% 100%;
    top: 15px;
}
.inputBox .eye.open {
  position: absolute;
  right: 0;
  width: 20px;
  height: 20px;
  background: url('');
  background-size: 100% 100%;
  top: 15px;
}

.send-smg-code {
    position: absolute;
    right: 0;
    width: 72px;
    height: 23px;
    font-size: 12px;
    line-height: 25px;
    height: 26px;
    text-align: center;
    border: 1px solid #2d4ed1;
    border-radius: 3px;
    top: 14px
}

.send-smg-code.disable {
    background: #2d4ed1;
    pointer-events: none;
    color: #fff
}

.setp-tips-box
    padding-top: 25px;
    display: flex;
    width: 84%;
    margin: 0 auto;
    justify-content: space-between;
    span
      width: 75px;
      height: 21px;
      text-align: center;
      line-height: 21px;
      color: #999;
      font-size: 13px;
      display: inline-block;
      color: #999;
      &.active
        color: #2d4ed1;
        position: relative;

.setp-dot-box {
  width: 67%;
  margin: 0 auto;
  justify-content: space-between;
  display: flex;
  margin-top: 10px;
}
.setp-dot-box span {
  width: 14px;
  height: 14px;
  background:url('');
  background-size: 100% 100%;
  display: inline-block;
  position: relative;
}
.setp-dot-box span.active {
  background-image:url('');
  position: relative;
  background-size: 100% 100%;
}

.setp-dot-box span.setp-line {
  height: 1px;
  width: 45px;
  margin-top: 10px;
  position: relative;
  background: none;
}
.setp-line:after {
  display: block;
  position: absolute;
  left: 0px;
  bottom: 4px;
  content: " ";
  width: 100%;
  border-top: 1px solid #ccc;
}
.setp {
  height: 93px;
  width: 100%;
}
.form-box {
  background: #fff;
  position: relative;
  position: relative;
}
.form-box:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ddd;
  content: ' ';
  width: 100%;
}
.form-box:before {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-top: 1px solid #ddd;
  content: ' ';
  width: 100%;
}
.h10 {
    padding-top: 10px;
}
